/*
 * Copyright 2012-2018 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// TODO fix modal scrolling on mobile devices, see https://github.com/twbs/bootstrap/issues/24737

.gt-full-width-modal {
  // this is to override padding-right that bootstrap modal (unnecessarily) adds for scrollbar
  padding-right: 0 !important;
}

.gt-full-width-modal .modal-dialog {
  width: calc(100% - (1.75rem * 2));
  max-width: inherit; // override max-width from bootstrap
}

.gt-full-width-modal.modal .gt-close-sticky {
  position: sticky; // not supported by all browsers, but designed so fallback is acceptable
  height: 0;
  top: 20px; // top is needed for browsers that support sticky
  margin-top: 20px;
  z-index: 100;
}

.gt-full-width-modal.modal .close {
  margin-right: 25px;
}

.gt-full-width-modal.modal .modal-body {
  padding-top: 20px; // override .modal-body top padding due to margin-top of close button above
}

.gt-full-height-modal .modal-dialog {
  align-items: inherit !important; // override align-items to make it fill available height
}

#queryModal .gt-clipboard-sticky {
  position: sticky; // not supported by all browsers, but designed so fallback is acceptable
  top: 50px; // top is needed for browsers that support sticky
  height: 0;
  margin-top: 30px;
  margin-bottom: -30px;
  margin-right: 26px;
  z-index: 100;
}

.gt-full-width-modal-copy {
  @extend button.close;
}

#queryModal .gt-clip {
  position: static;
  color: #7f7f7f;
  float: right;
}

.modal .close {
  z-index: 100;
  // override bootstrap styling for modal close icon
  // important: IE9 (haven't tried other IE versions) has strange behavior after hovering over and
  // out of close button
  // this override is no longer applied and the button gets too light (default bootstrap opacity .2)
  // so bootstrap close.scss is duplicated/modified to handle this
  opacity: .42 !important; // just enough opacity to meet accessibility contrast ratio
  font-size: 24px !important;
}

// override bootstrap styling for modal close icon
.modal .close:hover, .modal .close:focus {
  opacity: .62 !important;
}

@include media-breakpoint-up(lg) {
  .gt-trace-timer-table {
    max-width: 80%;
  }
}

@media screen and (min-width: 1400px) {
  .gt-trace-timer-table {
    max-width: 85%;
  }
}
